<!--
<xc-el-select-pagination v-if="control.form.assigneetype=='user'"
	v-model="control.form.assigneetype_user_id" @loadData="userControl_loadData"
	:options="userControl.options" optionLabel="nickname" optionValue="id"
	:totalpage="userControl.totalpage"></xc-el-select-pagination>
-->
<template>
	<view style="display: inline-block;width:50%;" class="u-input u-input-single-checkbox">
	<el-select v-model="control.value" @change="control_change" filterable remote :remote-method="control_clickFilter">
		<el-option v-for="option in options" :key="option" :label="option[optionLabel]" :value="option[optionValue]">
		</el-option>
		<div>
			<el-pagination background layout="prev, pager, next" :hide-on-single-page="true"
				:page-count="Number(control.totalpage)" @current-change="change_page">
			</el-pagination>
		</div>
	</el-select>
	</view>
</template>

<script>
	export default {
		props: {
			modelValue: {
				type: Number,
				default: null
			},
			optionLabel: {
				type: String,
				default: null
			},
			optionValue: {
				type: String,
				default: null
			},
			totalpage: {
				type: Number,
				default: 0
			},
			options: {
				type: Array,
				default: null
			},
		},
		watch: {
			'modelValue': {
				handler(newVal, oldVal) {
					let that = this;
					that.control.value = that.modelValue;
				},
			},
		},
		emits: ['loadData'],
		data() {
			return {
				sp: {
					checked: false,
				},
				control: {
					value:null,
					pageNumber: 0,
					// totalpage: 1,
					filterString: "",
					// options: []
				},
			};
		},
		created() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit: function() {
				let that = this;
				let control = that.control;
				that.control.value = that.modelValue;
				that.$emit('loadData', that.control.filterString);
			},	
			control_change: function() {
				let that = this;
				that.$emit('update:modelValue', that.control.value);
			},
			change_page(pageNumber){
			  let that = this;
			  that.control.pageNumber = pageNumber;
			  that.$emit('loadData', that.control.filterString);
			},
			control_clickFilter: function(query) {
				let that = this;
				that.control.filterString = query;
				that.$emit('loadData', that.control.filterString);
			}
		}
	};
</script>

<style lang="scss">
</style>